<template>
	<view class="contain">
		<view class="flex justify-center w-[100%] flex-col margin:0 auto;">
			<!-- <view class="mt-3 mb-2"><text class="blod">1、登录/注册</text></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(0)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z1.png" mode="widthFix"></image></view> -->
			<view class="mb-2"><text class="blod">1、开始认知学习</text></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(1)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z2.png" mode="widthFix"></image></view>
			<view class="mb-2"><text class="blod">2、进入个人中心，绑定查询</text></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(2)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z3.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(3)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z3-1.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(5)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z4.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(4)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z3-2.png" mode="widthFix"></image></view>
			<view class="mb-2"><text class="blod">3、进入个人中心，查看疏导记录</text></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(6)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z5.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(7)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z5-1.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(18)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/pfdbd.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(8)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z5-2.png" mode="widthFix"></image></view>
			<view class="mb-2"><text class="blod">4、预约信息填写(1)</text></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(9)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z6.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(10)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z6-1.png" mode="widthFix"></image></view>
			<view class="mb-2"><text class="blod">5、预约时间选择(2)</text></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(11)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(12)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7-1.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(13)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7-2.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(14)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7-3.png" mode="widthFix"></image></view>
			<view class="mb-2"><text class="blod">6、挂号时间选择</text></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(16)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z8.png" mode="widthFix"></image></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(17)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z8-1.png" mode="widthFix"></image></view>
			<view class="mb-2"><text class="blod">7、保存提交信息</text></view>
			<view class="flex justify-start w-[100%] mb-3" @click="previewimg(15)"><image src="https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7-4.png" mode="widthFix"></image></view>
		</view>
	</view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
const previewimg=(index:number)=>{
	uni.previewImage({
		current:imglists.data[index],
		urls: imglists.data
	});
}
let imglists=reactive({data:[
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z1.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z2.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z3.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z3-1.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z3-2.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z4.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z5.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z5-1.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z5-2.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z6.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z6-1.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7-1.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7-2.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7-3.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z7-4.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z8.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/z8-1.png",
	"https://guangxins.oss-cn-shenzhen.aliyuncs.com/images/zhidao/pfdbd.png"
]});
</script>
<style>
	page{
		background:#f6eade;
	}
</style>
<style lang='scss' scoped>
	@import "zhidao.scss";
</style>